import { InputComponent } from 'src/app/component/input/input.component';
import { Component, OnInit, Input, ElementRef, Output, EventEmitter, QueryList, ComponentFactoryResolver, ViewChild, ContentChild, TemplateRef, ViewContainerRef } from '@angular/core';

import { Table } from './table';

@Component({
  selector: 'min-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.less'],
})
export class TableComponent implements OnInit {

  constructor(private ElementRef: ElementRef, private componentFactoryResolver: ComponentFactoryResolver) { }
  public isShadow: boolean = false;
  public isScroll: boolean = false;

  public heightStyle: any = { height: 'auto' };
  public desc: string;
  public eleTd:any = [];
  public eleTr:any = [];
  @Input() isOperation: boolean = true;
  @Input() orderName: string;
  @Input() sticky: number;//最小值为0


  @Input() headColum: Array<any> = [
      { code: "student-name", name: "Student Info", width: 200,"order":true },
    { code: "pc-name", name: "PC's name" },
    { code: "student", name: "Student Info", width: 200 },
    { code: "pc", name: "PC's name", width: 120 },
    { code: "ss", name: "Student Info", width: 220 },
    { code: "dd", name: "PC's name", width: 100 },
    { code: "rr", name: "Student Info", width: 150 },
    { code: "tt", name: "PC's name" },
    { code: "yy", name: "Student Info", width: 290 },
    { code: "uu", name: "PC's name", width: 200 },
    { code: "ii", name: "Student Info", width: 200 },
    { code: "oo", name: "PC's name", width: 200 }
  ];

  @Output() rowClick: EventEmitter<any> = new EventEmitter();
  @Output() tdClick: EventEmitter<any> = new EventEmitter(); 
  @Output() orderChange: EventEmitter<any> = new EventEmitter();
  ngOnInit() {
    this.onResize();
  }
  getWidth(){
    console.log(this.headColum);
    
    let index = -1;
    for(let item of this.eleTd){
      ++index;
      item.querySelector('div').style.width = this.headColum[index].width + 'px';
    }

  }
  ngAfterViewInit(){
     this.eleTd = this.ElementRef.nativeElement.querySelector('tbody').querySelectorAll('td');
     this.getWidth();
     this.eleTr = this.ElementRef.nativeElement.querySelector('tbody').querySelectorAll('tr').length;
     let windowHeight = document.documentElement.clientHeight;
     this.heightStyle.height = windowHeight - 190;
     if (this.eleTr.length * 58 > this.heightStyle.height) {
       this.heightStyle['overflow-y'] = 'scroll';
       this.isScroll = true;
       this.heightStyle.height += 'px';
     } else {
       this.heightStyle['overflow-y'] = 'hidden';
       this.isScroll = false;
       this.heightStyle.height = 'auto';
     }
  }
  onResize() {
    let eleWidth = this.ElementRef.nativeElement.querySelector('.student-body').clientWidth;//可视区域宽度
    let totalWidth = 0;//给定值宽度
    let noWidth = [];
    let avgWidth = 0;
    for (let i in this.headColum) {
      if (!this.headColum[i].width) {
        noWidth.push(i);
        continue;
      }
      totalWidth += this.headColum[i].width;
    }
    if (eleWidth > totalWidth) {
      avgWidth = (eleWidth - totalWidth) / noWidth.length > 100 ? (eleWidth - totalWidth) / noWidth.length : 100;
    } else {
      let length = this.headColum.length - noWidth.length;
      avgWidth = totalWidth / length;
    }
    for (let i in this.headColum) {
      if (!this.headColum[i].width) {
        this.headColum[i].width = avgWidth;
        continue;
      }
    }
    this.getWidth();
  }
  ngAfterViewChecked() {
 
  }
  scrollBody(event) {
    let osTop = event.target.scrollLeft;
    let eve = this.ElementRef.nativeElement.querySelector('.head-table');
    eve.scrollLeft = osTop;
    if (osTop > 0) {
      this.isShadow = true;
    } else {
      this.isShadow = false;
    }
  }
  //排序
  orderList(order) {
    this.desc = this.desc === 'desc' ? 'asc' : 'desc';
    this.orderChange.emit(`${order} ${this.desc}`);
  }
  getLeft(index) {
    let leftWidth = 0;
    for (let i in this.headColum) {
      if (Number(i) > index-1) {
        break;
      }
      leftWidth += this.headColum[i]['width'];
    }
    return `${leftWidth}px`;
  }
  // loadOperation() {
  //   let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.tableItem[0].component);

  //   let viewContainerRef = this.tableHost.viewContainerRef;
  //   // viewContainerRef.clear();

  //   let componentRef = viewContainerRef.createComponent(componentFactory);
  //   // (<Table>componentRef.instance).data = this.tableItem.data;
  // }
}
